<template>
  <div class="cenBox">
    <div class="nav">
      <div class="nav_box">
        <router-link to="/home/team-t" class="router-link-active">团队风采馆</router-link>
        <el-icon color="#999">
          <DArrowRight />
        </el-icon>
        <router-link to="/home/team-d" class="router-link-active">党员风采</router-link>
        <el-icon color="#999">
          <DArrowRight />
        </el-icon>
        <router-link to="/home/home/team-d/onecen" class="router-link-active">党员信息</router-link>
      </div>
    </div>
    <div class="cenboxs">
      <div class="header_cen">
        <div class="header_img" @click="touxiang">
          <img :src="PointList.avatar" alt="" />
        </div>
        <div class="card_name">
          <h2>
            <span>{{ PointList.nickname }}</span>
          </h2>
          <div class="age">
            <b>{{ PointList.age == '' ? '' : PointList.age + '岁' }}</b>
          </div>
        </div>
        <div class="fen">
          <div>
            <p>{{ zong }}</p>
            <h5>累计总积分</h5>
          </div>
          <div class="fist"></div>
          <div>
            <p>{{ PointList.exam }}</p>
            <h5>答题积分</h5>
          </div>
          <div>
            <p>{{ PointList.matrix }}</p>
            <h5>学习矩阵积分</h5>
          </div>
          <div>
            <p>{{ PointList.network }}</p>
            <h5>最美网文积分</h5>
          </div>
          <div>
            <p>{{ PointList.video }}</p>
            <h5>看视频积分</h5>
          </div>
          <div>
            <p>{{ PointList.todo }}</p>
            <h5>完成待办积分</h5>
          </div>
        </div>
      </div>
      <div>
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane label="空间动态" name="first">
            <div class="onebox">
              <div v-for="(item, index) in dynamic" :key="index" style="display: flex;">
                <div class=" cen_time">
                  <div style="margin-left: 5%; margin-top: 10%">
                    <span style="font-size: 22px; margin-right: 10px">{{
          item.day
        }}</span>
                    <span> {{ item.month }}月</span>
                  </div>
                  <div style="margin-left: 5%; margin-top: 10%; color: #ccc">
                    {{ item.time }}
                  </div>
                </div>
                <div class="centertext" style="cursor: pointer" @click="detail(item.id)">
                  <div>
                    <div class="cen_texts" v-if="ad === index">
                      {{ item.content }}
                    </div>
                    <div class="cen_text" v-else>
                      {{ item.content }}
                    </div>
                    <div class="kai" v-show="item.content.length > 115">
                      <div @click.stop="zhankai(index)">{{ ad === index ? (sub = '收起') : (sub = '展开') }}</div>
                    </div>
                  </div>
                  <div style="display: flex">
                    <div class="image">
                      <div v-for="(ite, ind) in item.images.slice(0, 5)" :key="ind">
                        <img :src="ite" alt="" />
                      </div>
                    </div>
                    <div style="
                      display: flex;
                      align-items: flex-end;
                      margin-left: 2px;
                      color: #767676;
                    " v-if="item.images.length > 5">
                      共{{ item.images.length }}张
                    </div>
                  </div>
                  <div class="zan">
                    <div @click.stop="like(item.id)" style="cursor: pointer">
                      <div class="szan" v-if="item.is_like == 0">
                        <img src="@/assets/nozan.png" alt="" />
                      </div>
                      <div class="szan" v-else>
                        <img src="@/assets/zan.png" alt="" />
                      </div>
                    </div>
                    <div style="margin-left: 5px">{{ item.like }}</div>
                  </div>
                </div>
              </div>

              <div class="rqs" v-show="dtkong">
                <img src="@/image/容器.svg" alt="" />
                <div>暂无信息</div>
              </div>
            </div>
            <div class="con_bom" v-show="!dtkong">
              <div class="cc">共{{ dttotal }}条</div>
              <el-pagination v-model:page-size="pageSizedt" background layout="prev, pager, next" :total="dttotal"
                @next-click="nextclickdt" @prev-click="prevclickdt" @change="change1dt" />
            </div>
          </el-tab-pane>
          <el-tab-pane label="基本信息" name="second">
            <div class="con">
              <div class="con_item">
                <div class="c_item">
                  <div class="i_lef">所在党支部：</div>
                  <div class="i_rig">
                    <div class="i_con">{{ InfoList.dept }}</div>
                  </div>
                </div>
                <div class="br"></div>
              </div>
              <div class="con_item">
                <div class="c_item">
                  <div class="i_lef">入党年月：</div>
                  <div class="i_rig">
                    <div class="i_con">{{ InfoList.join }}</div>
                    <div class="rig" style="cursor: pointer" @click="Edits(1)" v-if="infosj == '党支部书记'">
                      <div style="display: flex; justify-content: space-around">
                        <div>
                          <el-icon class="iconEdit">
                            <Edit />
                          </el-icon>
                        </div>
                        &nbsp;
                        <div style="color: #e02020">修改</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="br"></div>
              </div>
              <div class="con_item">
                <div class="c_item">
                  <div class="i_lef">党龄：</div>
                  <div class="i_rig">
                    <div class="i_con">{{ InfoList.join_age }}</div>
                  </div>
                </div>
                <div class="br"></div>
              </div>
              <div class="con_item">
                <div class="c_item">
                  <div class="i_lef">党内职务：</div>
                  <div class="i_rig">
                    <div class="i_con">{{ InfoList.position_text }}</div>
                    <div class="rig" style="cursor: pointer" @click="Edits(2)" v-if="ziji != PointList.nickname && infosj == '党支部书记'
          ">
                      <div style="display: flex; justify-content: space-around">
                        <div>
                          <el-icon class="iconEdit">
                            <Edit />
                          </el-icon>
                        </div>
                        &nbsp;
                        <div style="color: #e02020">修改</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="br"></div>
              </div>
              <div class="con_item">
                <div class="c_item">
                  <div class="i_lef">个人荣誉：</div>
                  <div class="i_rig">
                    <div class="i_con">
                      <div class="cccc" v-for="(it, i) in InfoList.honor" :key="i">
                        <div class="c_a">{{ it.date }}</div>
                        <div class="c_b">{{ it.content }}</div>
                      </div>
                    </div>
                    <div class="rig" style="cursor: pointer" @click="Edits(3)" v-if="infosj == '党支部书记'">
                      <div style="display: flex; justify-content: space-around">
                        <div>
                          <el-icon class="iconEdit">
                            <Edit />
                          </el-icon>
                        </div>
                        &nbsp;
                        <div style="color: #e02020" class="xiuga">修改</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="br"></div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="待办事项完成情况" name="third">
            <div class="biaoge">
              <div class="wai">
                <div class="boxfabu">
                  <div>
                    <b>发布时间：</b>
                    <el-date-picker v-model="publictime" type="daterange" range-separator="To" start-placeholder="开始时间"
                      end-placeholder="结束时间" :size="size" :clearable="false" />
                  </div>
                  <div>
                    &nbsp; &nbsp;
                    <b>事项名称: &nbsp;</b>
                    <el-input v-model="data.keyword" class="w-50 m-2" size="large" placeholder="请输入事项名称" />
                  </div>
                  <div>
                    <b>事项分类: &nbsp;</b>
                    <el-select v-model="data.type" clearable placeholder="请选择">
                      <el-option label="党费缴纳" value="1" />
                      <el-option label="教育会议" value="2" />
                      <el-option label="党员活动" value="3" />
                      <el-option label="其他" value="4" />
                    </el-select>
                  </div>
                </div>
                <div class="boxwancheng">
                  <div>
                    <b>完成状态: &nbsp;</b>
                    <el-select v-model="data.status" clearable placeholder="选择已完成的状态">
                      <el-option label="已完成" value="2" />
                      <el-option label="未完成" value="1" />
                    </el-select>
                  </div>
                  <div class="biut">
                    <el-button type="primary" :icon="Search" style="background: #e02020; border: none; cursor: pointer"
                      @click="chaxun">查询</el-button>
                    <el-button type="primary" :icon="RefreshLeft" style="
                        background: #fff;
                        color: #e02020;
                        border-color: #e02020;
                        cursor: pointer;
                      " @click="chongzhi">重置</el-button>
                  </div>
                </div>
              </div>
              <div class="bbbbb">
                <el-table :data="daibanlist" style="width: 100%">
                  <el-table-column prop="id" type="index" label="序号" width="60px" align="center">
                    <template #default="scope">
                      {{ (data.page - 1) * data.page_size + scope.$index + 1 }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="create_time" label="发布时间" width="180px" align="center" />
                  <el-table-column prop="name" label="事项名称" width="280px" align="center" />
                  <el-table-column prop="type" label="事项分类" width="180px" align="center">

                    <template #default="scope">
                      <div v-if="scope.row.type == 1">
                        <span>党费缴纳</span>
                      </div>
                      <div v-else-if="scope.row.type == 2">
                        <span>教育会议</span>
                      </div>
                      <div v-else-if="scope.row.type == 3">
                        <span>党员活动</span>
                      </div>
                      <div v-else>
                        <span>其他</span>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="完成状态" width="100px" align="center">

                    <template #default="scope">
                      <div v-if="scope.row.status">
                        <img src="../../assets/dui.png" alt="" class="dui" />
                      </div>
                      <div v-else>
                        <img src="../../assets/cuo.png" alt="" class="dui" />
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="status" label="操作" width="80px" align="center">

                    <template #default="scope">
                      <div v-if="scope.row.status">
                        <span class="cha" @click="djdq(scope.row, scope.row.type)">查看</span>
                      </div>
                      <div v-else></div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="point" label="获得积分" width="80px" align="center">

                    <template #default="scope">
                      <div>
                        <span>+{{ scope.row.point }}</span>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div class="con_bomtab">
              <div class="cc">共{{ total }}条</div>
              <el-pagination v-model:page-size="pageSize" background layout="prev, pager, next" :total="total"
                @next-click="nextclick" @prev-click="prevclick" @change="change1" />
            </div>
          </el-tab-pane>
          <el-tab-pane label="评论留言" name="fourth">
            <div class="lyboxla">
              <div style="margin: 2%" v-for="(item, index) in lyList" :key="index">
                <p>{{ item.create_time }}</p>
                <p style="line-height: 20px; margin-top: 10px">
                  {{ item.content }}
                </p>
                <dl class="left_rght">
                  <dt v-if="item.article.image">
                    <img :src="item.article.image" alt="" />
                  </dt>
                  <p v-else></p>
                  <dd>
                    <h3>{{ item.article.title }}</h3>
                    <p v-html="item.article.intro"></p>
                  </dd>
                </dl>
              </div>
              <div class="rq" v-show="ly">
                <img src="@/image/容器.svg" alt="" />
                <div>暂无信息</div>
              </div>
            </div>
            <div class="con_bomly" v-if="!ly">
              <div class="cc">共{{ totals }}条</div>
              <el-pagination v-model:page-size="pageSizes" background layout="prev, pager, next" :total="totals"
                @next-click="nextclicks" @prev-click="prevclicks" @change="change2" />
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div class="zhe" v-show="djdqflag">
      <div class="zhao">
        <div style="display: flex; justify-content: space-between; padding: 15px">
          <h3>
            {{
          df == 1
            ? '党费缴纳'
            : df == 2
              ? '教育会议'
              : df == 3
                ? '党员活动'
                : '其他'
        }}
          </h3>
          <div @click="djdqflag = false" style="cursor: pointer">
            <img src="@/assets/X.png" alt="" class="XX" />
          </div>
        </div>
        <div v-if="df == 1">
          <el-table :data="datalist" style="width: 100%; margin: 25px 0" align="center">
            <el-table-column prop="date" label="缴纳日期" width="180px" align="center" />
            <el-table-column prop="amount" label="缴纳金额（元）" width="180px" align="center" />
            <el-table-column label="相关图片" width="160px" align="center">

              <template #default="scope">
                <div>
                  <div v-for="(item, index) in scope.row.images" :key="index" @click="fdimage(item)"
                    style="cursor: pointer">
                    <!-- <img src="../../assets/pepeo.png" alt="" class="im">
                                    <img src="../../assets/pepeo.png" alt="" class="im">
                                    <img src="../../assets/pepeo.png" alt="" class="im"> -->
                    <img :src="item" alt="" class="im" style="float: left" />
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="padguan">
            <el-button type="primary" class="guanbiss" @click="djdqflag = false">关闭</el-button>
          </div>
        </div>
        <div class="mage" v-if="df == 2">
          <h3>记录/感想*</h3>
          <p>{{ qtlist.content }}</p>
          <div class="jlimage">
            <div v-for="(item, index) in qtlist.images" :key="index" @click="fdimage(item)">
              <img :src="item" alt="" class="ims" />
            </div>
          </div>
          <div class="padguan">
            <el-button type="primary" class="guanbiss" @click="djdqflag = false">关闭</el-button>
          </div>
        </div>
        <div class="mage" v-if="df == 3">
          <h3>记录/感想*</h3>
          <p>{{ qtlist.content }}</p>
          <div class="jlimage">
            <div v-for="(item, index) in qtlist.images" :key="index" @click="fdimage(item)">
              <img :src="item" alt="" class="ims" />
            </div>
          </div>
          <div class="padguan">
            <el-button type="primary" class="guanbiss" @click="djdqflag = false">关闭</el-button>
          </div>
        </div>
        <div class="mage" v-if="df == 4">
          <h3>记录/感想*</h3>
          <p>{{ qtlist.content }}</p>
          <div class="jlimage">
            <div v-for="(item, index) in qtlist.images" :key="index" @click="fdimage(item)">
              <img :src="item" alt="" class="ims" />
            </div>
          </div>

          <div class="padguan">
            <el-button type="primary" class="guanbiss" @click="djdqflag = false">关闭</el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="zhe" v-show="poto">
      <div class="zhao">
        <div style="display: flex; justify-content: space-between; padding: 15px">
          <h3>修改头像</h3>
          <div @click="pocha" style="cursor: pointer">
            <img src="@/assets/X.png" alt="" class="XX" />
          </div>
        </div>
        <div>
          <div style="list-style: none; padding: 15px; line-height: 20px">
            <li>图片规格：不可大于2M</li>
            <li>图片尺寸：建议为160px*160px</li>
            <li>图片格式：必须使用png、bmp、jpg、jpeg</li>
            <li>要求使用本人免冠红底标准照片，穿绿色军装</li>
            <div style="margin: 15px 0">
              <el-upload class="avatar-uploader" :auto-upload="false" accept="image/*" :show-file-list="false"
                :before-upload="beforeAvatarUpload" :on-change="avatarFileChange">
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon">
                  <Plus />
                </el-icon>
                <!-- <input type="file" name="上传" id="" @change="handleFileUpload" accept="image/*"> -->
              </el-upload>
            </div>
            <el-button type="primary" class="quxiao" @click="poqu">取消</el-button>
            <el-button type="primary" class="guanbi" @click="pobao">保存</el-button>
          </div>
        </div>
      </div>
    </div>
    <!-- 入党年月 -->
    <div class="zhe" v-show="flag">
      <div class="zhao">
        <div style="display: flex; justify-content: space-between; padding: 15px">
          <h3>
            {{ nei == 1 ? '入党年月' : nei == 2 ? '党内职务' : '个人荣誉' }}
          </h3>
          <div @click="flag = false" style="cursor: pointer">
            <img src="@/assets/X.png" alt="" class="XX" />
          </div>
        </div>
        <div style="margin: 15px 0">
          <div class="rudangtitle" v-if="nei == 1">
            <div class="rudang">入党时间</div>
            <el-date-picker v-model="value1" type="date" :size="size" class="prickertimes" />
          </div>
        </div>
        <el-button type="primary" class="quxiao" @click="flag = false">取消</el-button>
        <el-button type="primary" class="guanbi" @click="bao">保存</el-button>
      </div>
    </div>
    <!-- 党内职务 -->
    <div class="zhe" v-show="flag2">
      <div class="zhao">
        <div style="display: flex; justify-content: space-between; padding: 15px">
          <h3>
            {{ nei == 1 ? '入党年月' : nei == 2 ? '党内职务' : '个人荣誉' }}
          </h3>
          <div @click="flag2 = false" style="cursor: pointer">
            <img src="@/assets/X.png" alt="" class="XX" />
          </div>
        </div>
        <div style="margin: 15px 0">
          <div v-if="nei == 2">
            <div class="bbb">
              <div class="rudang">党内职务</div>
              <el-select v-model="office" clearable style="width: 80%">
                <el-option v-for="item in arrtime" :key="item.value" :label="item.name" :value="item.value" />
              </el-select>
            </div>
          </div>
        </div>
        <el-button type="primary" class="quxiao" @click="flag2 = false">取消</el-button>
        <el-button type="primary" class="guanbi" @click="bao2">保存</el-button>
      </div>
    </div>
    <!-- 个人荣誉 -->
    <div class="zhe" v-show="flag3">
      <div class="zhao">
        <div style="display: flex; justify-content: space-between; padding: 15px">
          <h3>
            {{ nei == 1 ? '入党年月' : nei == 2 ? '党内职务' : '个人荣誉' }}
          </h3>
          <div @click="flag3 = false" style="cursor: pointer">
            <img src="@/assets/X.png" alt="" class="XX" />
          </div>
        </div>
        <div style="margin: 15px 0">
          <div v-for="(item, i) in myjson">
            <div class="rudang3">
              <div class="rudang1">获取时间</div>
              <el-date-picker v-model="item.date" type="date" class="prickertimes" />
              <div style="
                  display: flex;
                  justify-content: space-around;
                  cursor: pointer;
                " @click="mydel(i)" v-if="item.date">
                <div>
                  <el-icon class="shan">
                    <Delete />
                  </el-icon>
                </div>
                &nbsp;
                <div style="color: #e02020">删除</div>
              </div>
            </div>
            <div class="rudang3">
              <div class="rudang1">荣誉名称</div>
              <div class="run2">
                <el-input v-model="item.content" placeholder="请输入" />
              </div>
            </div>
          </div>
          <el-button type="danger" class="tj" @click="tj">添加</el-button>
        </div>
        <el-button type="primary" class="quxiao" @click="flag3 = false">取消</el-button>
        <el-button type="primary" class="guanbi" @click="bao4">保存</el-button>
      </div>
    </div>
    <!-- 添加个人荣誉 -->
    <div class="zhe" v-show="flag4">
      <div class="zhao">
        <div style="display: flex; justify-content: space-between; padding: 15px">
          <h3>添加荣誉</h3>
          <div @click="flag4 = false" style="cursor: pointer">
            <img src="@/assets/X.png" alt="" class="XX" />
          </div>
        </div>
        <div style="margin: 15px 0">
          <div>
            <div class="rudang3">
              <div class="rudang1">获取时间</div>
              <el-date-picker v-model="mytj[0].date" type="date" class="prickertimes" />
            </div>
            <div class="rudang3">
              <div class="rudang1">荣誉名称</div>
              <div class="run2">
                <el-input v-model="mytj[0].content" placeholder="请输入" />
              </div>
            </div>
          </div>
        </div>
        <div class="mybtn">
          <el-button type="primary" class="quxiao" @click="flag4 = false">取消</el-button>
          <el-button type="primary" class="guanbi" @click="bao3">保存</el-button>
        </div>
      </div>
    </div>
  </div>
  <div class="ylzhe" v-show="flimg" @click="flimg = false">
    <div class="ylzhao">
      <img :src="imageyl" alt="" />
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  Delete,
  Edit,
  Search,
  Share,
  Upload,
  RefreshLeft,
  Download,
  Plus,
  ZoomIn
} from '@element-plus/icons-vue'
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import type { UploadFile } from 'element-plus'
import {
  deptInfo,
  deptPoint,
  matter,
  mattersou,
  matterdetail,
  messagess,
  positionoff,
  member_edit,
  lists,
  likes,
  reqUpload,
  member_info,
  comment
} from '@/api/team'
import { useRoute } from 'vue-router'
import moment from 'moment'
import type { TabsPaneContext } from 'element-plus'
import { ElMessage } from 'element-plus'
import type { UploadProps } from 'element-plus'
const size = ref<'default' | 'large' | 'small'>('default')
let flimg = ref(false)
let infosj = ref()
let Route = useRoute()
let ziji = ref(localStorage.getItem('nickname'))
const info = () => {
  member_info().then(res => {
    console.log(res.data.data.position_text, 'info')
    infosj.value = res.data.data.position_text
  })
}
info()
let lyList = ref()
let article = ref()
let ly = ref(true)
let lydata: any = ref({
  page: 1,
  page_size: 3,
  self: 0,
  member_id: Route.query.item
})
let totals = ref(0)
const messages = async () => {
  comment(lydata.value).then(res => {
    console.log(res, 'commit')
    lyList.value = res.data.data.data
    // article.value = res.data.data.data.article
    article.value = res.data.data.data.map((item: any) => {
      return item.article
    })
    totals.value = res.data.data.total
    console.log(article.value, 'liuyan')
    console.log(lyList.value, '555555555555')
    if (lyList.value == !{}) {
      ly.value = true
    } else {
      ly.value = false
    }
  })
}
messages()
const like = (id: any) => {
  likes({ id: id }).then(res => {
    console.log(res, 'dianzan')
    listss()
  })
}

const isExpanded = ref(false)
//党员积分和党员信息接口
let zong: any = ref<any>(0)
let InfoList: any = ref({
  dept: '',
  dept_id: '',
  honor: [],
  join: '',
  id: '',
  join_age: '',
  position: '',
  position_text: '',
  self: ''
})
let PointList = ref({
  age: '',
  avatar: '',
  exam: '',
  id: '',
  matrix: '',
  network: '',
  nickname: '',
  point: '',
  todo: '',
  video: ''
})
const myjson: any = ref([
  {
    date: '',
    content: ''
  }
])
const mytj: any = ref([
  {
    date: '',
    content: ''
  }
])
const mydel = (e: any) => {
  myjson.value.splice(e, 1)
  myjson.value = myjson.value.map((item: any) => {
    item.date = moment(item.date).format('YYYY-MM-DD')
    return item
    // return (item.date = moment(item.date).format('YYYY-MM-DD'))
  })
  editcenter.value.field = 'honor'
  editcenter.value.value = JSON.stringify(myjson.value)
  member_edit(editcenter.value).then(res => {
    console.log(res, 'xiugai')
    ElMessage.success('已删除!')
    detpInfos()
  })
  console.log(myjson.value, '添加11')
}
let xzdate: any = ref<any>()
let aa = new Date()
xzdate.value = moment(aa).format('YYYY-MM-DD')
console.log(xzdate.value, 'xasj')
const detpInfos = async () => {
  let data: any = {
    member_id: Route.query.item
  }
  await deptInfo(data).then(res => {
    InfoList.value = res.data.data
    value1.value = InfoList.value.join
    office.value = InfoList.value.position_text
    if (InfoList.value.honor.length > 0) {
      myjson.value = InfoList.value.honor
      console.log(myjson.value)
    }
    // console.log(InfoList.value.position_text, 'balue')
  })
  await deptPoint(data).then(res => {
    PointList.value = res.data.data
    zong.value =
      PointList.value.exam +
      PointList.value.matrix +
      PointList.value.network +
      PointList.value.todo +
      PointList.value.video
  })
}
detpInfos()
const value1 = ref('')
console.log(value1.value)
//待办事项接口
let daibanlist = ref()
let total = ref(10)

const pageSize = ref(15)
const nextclick = async () => {
  data.value.page++
  daiban()
}
const prevclick = async () => {
  data.value.page--
  daiban()
}
const change1 = async (e: any) => {
  data.value.page = e
  daiban()
}
const pageSizes = ref(3)
const nextclicks = async () => {
  lydata.value.page++
  messages()
}
const prevclicks = async () => {
  lydata.value.page--
  messages()
}
const change2 = async (e: any) => {
  lydata.value.page = e
  messages()
}
//基本信息弹框
let flag: any = ref(false)
let flag2: any = ref(false)
let flag3: any = ref(false)
let flag4: any = ref(false)
//修改头像弹框
let poto: any = ref(false)
//复用弹框关键
let nei = ref()
const tj = () => {
  flag3.value = false
  flag4.value = true
}
//修改基本信息弹框
let editcenter = ref({
  member_id: Route.query.item,
  field: '',
  value: ''
})
const Edits = (e: any) => {
  console.log(e)
  nei.value = e
  // flag.value = true
  if (e == 1) {
    flag.value = true
  } else if (e == 2) {
    flag2.value = true
  } else if (e == 3) {
    flag3.value = true
  }
}
const avatarFile = ref({})
const imageUrl = ref('')
function dataURLtoFile(dataURL: any) {
  let arr = dataURL.split(',')
  let mime = arr[0].match(/:(.*?);/)[1]
  let bstr = atob(arr[1])
  let n = bstr.length
  let u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  return new File([u8arr], `${Date.now}.jpg`, {
    type: mime
  })
}
const avatarFileChange = (e: { raw?: any }) => {
  avatarFile.value = e
  imageUrl.value = URL.createObjectURL(e.raw)
  console.log(imageUrl.value, '上传图片')
}
const beforeAvatarUpload: UploadProps['beforeUpload'] = async (
  rawFile: any
) => {
  if (
    rawFile.type !== 'image/jpeg' &&
    rawFile.type !== 'image/png' &&
    rawFile.type !== 'image/jpg' &&
    rawFile.type !== 'image/bmp'
  ) {
    ElMessage.error('格式不正确!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 1) {
    ElMessage.error('图片大小不能超过2MB!')
    return false
  }
  return false
}

//点击修改的保存
const bao = () => {
  editcenter.value.field = 'join'
  editcenter.value.value = moment(value1.value).format('YYYY-MM-DD')
  member_edit(editcenter.value).then(res => {
    console.log(res, 'xiugai')
    detpInfos()
  })
  flag.value = false
}
const bao2 = () => {
  editcenter.value.field = 'position'
  editcenter.value.value = office.value
  console.log(office.value, 'offer')
  member_edit(editcenter.value).then(res => {
    console.log(res, '党内职务修改')
    detpInfos()
  })
  flag2.value = false
}
const bao3 = () => {
  mytj.value[0].date = moment(mytj.value[0].date).format('YYYY-MM-DD')
  editcenter.value.field = 'honor'
  myjson.value = [...myjson.value, ...mytj.value]
  editcenter.value.value = JSON.stringify(myjson.value)
  member_edit(editcenter.value).then(res => {
    console.log(res, '保存')
    flag4.value = false
    detpInfos()
    mytj.value = [{ date: '', content: '' }]
  })
}
const bao4 = () => {
  myjson.value = myjson.value.map((item: any) => {
    item.date = moment(item.date).format('YYYY-MM-DD')
    return item
    // return (item.date = moment(item.date).format('YYYY-MM-DD'))
  })
  editcenter.value.field = 'honor'
  editcenter.value.value = JSON.stringify(myjson.value)
  member_edit(editcenter.value).then(res => {
    console.log(res, '保存')
    flag3.value = false
    detpInfos()
  })
}
//修改头像弹框
const touxiang = () => {
  poto.value = true
}
const pocha = () => {
  poto.value = false
}
const poqu = () => {
  poto.value = false
}
const pobao = () => {
  // 将压缩后的图片上传到服务器
  let img = new Image()
  img.src = imageUrl.value

  // 等待图片加载完成
  img.onload = async () => {
    // 创建canvas元素
    let canvas = document.createElement('canvas')
    let ctx = canvas.getContext('2d')

    // 设置canvas尺寸
    let width = img.width
    let height = img.height
    let scale = width / height
    let maxWidth = 800
    let maxHeight = 800 / scale
    canvas.width = maxWidth
    canvas.height = maxHeight

    // 绘制图片
    ctx.drawImage(img, 0, 0, maxWidth, maxHeight)

    // 将canvas转换为base64格式的图片
    let base64 = canvas.toDataURL('image/jpeg', 0.8)
    // 将base64格式的图片转换为File对象
    let file = dataURLtoFile(base64)
    avatarFile.value.raw = file
    let { data } = await reqUpload(avatarFile.value.raw)
    if (data.code != 1) {
      return ElMessage.error('上传失败！')
    }
    editcenter.value.field = 'avatar'
    editcenter.value.value = data.data.url
    member_edit(editcenter.value).then(res => {
      console.log(res, 'aa')
      poto.value = false
      detpInfos()
      if (data.code != 1) {
        return ElMessage.error('修改失败！')
      } else {
        return ElMessage.success('修改成功！')
      }
    })
  }
  // const compressedBlob = dataURLtoBlob(imageUrl.value);

  // // 将压缩后的图片上传到服务器
  // const formData = new FormData();
  // formData.append('avatar', compressedBlob, 'compressed_image.jpg');
}
const publictime = ref('')
let data: any = ref<any>({
  start_time: '',
  end_time: '',
  keyword: '',
  type: '',
  status: '',
  page: 1,
  page_size: 15
})
const daiban = async () => {
  await mattersou(data.value).then(res => {
    daibanlist.value = res.data.data.data
    total.value = res.data.data.total
    daibanlist.value = res.data.data.data.map((item: any, index: any) => {
      if (item.status == 1) {
        item.status = false
      } else {
        item.status = true
      }
      return item
    })
  })
}
daiban()
//查询按钮

const chaxun = async () => {
  let aa = publictime.value[0]
  let bb = publictime.value[1]
  if (publictime.value != '') {
    data.value.start_time = moment(aa).format('YYYY-MM-DD')
    data.value.end_time = moment(bb).format('YYYY-MM-DD')
  }
  daiban()
}
//重置按钮
const chongzhi = () => {
  data.value = {
    start_time: '',
    end_time: '',
    keyword: '',
    type: '',
    status: '',
    page: 1,
    page_size: 15
  }
  publictime.value = ''
  daiban()
}
//点击事项分类按钮
let djdqflag = ref(false)
let df = ref()
let datalist: any = ref<any>([])
let qtlist: any = ref<any>({
  content: '',
  images: [],
  date: '',
  amount: ''
})
const djdq = async (e: any, i: any) => {
  console.log(e, i, 'ididid')
  df.value = i

  djdqflag.value = true
  let data: any = {
    todo_id: e.id
  }
  await matterdetail(data).then(res => {
    console.log(res.data.data, '详情')
    datalist.value = [res.data.data]
    qtlist.value = res.data.data
    console.log(datalist.value, 'ssssss')
  })
}

//党内职务
const office = ref('')
const arrtime: any = ref([])
const offer = async () => {
  await positionoff().then(res => {
    arrtime.value = res.data.data
    // office.value=arrtime
    console.log(arrtime.value, 'zhiwu')
  })
}
console.log(office.value, 'off')
offer()
let dynamic: any = ref()
let dtkong: any = ref(true)
let dttotal = ref(0)
let dtdata: any = ref({
  range: 1,
  member_id: Route.query.item,
  page: 1,
  page_size: 2
})
const listss = async () => {
  await lists(dtdata.value).then(res => {
    dynamic.value = res.data.data.data
    dttotal.value = res.data.data.total
    console.log(dynamic.value)
  })
  if (dynamic.value == !{}) {
    dtkong.value = true
  } else {
    dtkong.value = false
  }
}
listss()
const pageSizedt = ref(2)
const nextclickdt = async () => {
  dtdata.value.page++
  listss()
}
const prevclickdt = async () => {
  dtdata.value.page--
  listss()
}
const change1dt = async (e: any) => {
  dtdata.value.page = e
  listss()
}
const activeName = ref('first')
//tab
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
//点击动态跳转详情页
const detail = async (e: any) => {
  const url = `/pc/home/team-t/detail?e=${encodeURIComponent(e)}`
  window.open(url, '_blank')
}
let imageyl = ref()
const fdimage = (ite: any) => {
  console.log(ite, 'tu')
  imageyl.value = ite
  flimg.value = true
}
let sub = ref('展开')
let ad = ref(null)
const zhankai = (index: any) => {
  if (ad.value === index) {
    ad.value = null; // 点击已展开的内容时收起
  } else {
    ad.value = index; // 点击未展开的内容时展开
  }
}
</script>

<style lang="scss" scoped>
.wai {
  border-bottom: 2px solid #e5e5e5;
  height: 130px;
}

.boxfabu {
  display: flex;

  div {
    width: 33%;
  }

  .el-select {
    width: 200px;
    // height: 40px !important;
  }

  ::v-deep .el-date-editor.el-input__wrapper {
    width: 220px !important;
  }
}

.boxwancheng {
  display: flex;

  .el-select {
    width: 240px;
    // height: 40px !important;
  }

  .biut {
    margin-left: 20px;
  }

  margin-top: 20px;
}

.demo-datetime-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}

.padguan {
  padding: 20px;
}

.guanbiss {
  background: #e02020;
  width: 70px;
  height: 30px;
  border: none;
  position: absolute;
  bottom: 15px;
  right: 15px;

  // padding: 20px;
}

.demo-datetime-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}

.bbb {
  display: flex;
  margin: 10px 15px;
  height: 100px;
}

.demo-datetime-picker .block:last-child {
  border-right: none;
}

.demo-datetime-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

.kong {
  width: 100%;
  height: 100%;
  margin-top: 200px;
}

.cha {
  color: #ff7b00;
  cursor: pointer;
}

.jlimage {
  display: flex;
  flex-wrap: wrap;
}

.ims {
  width: 100px;
  height: 100px;
  margin: 15px 0;
  margin-right: 20px;
  border-radius: 15px;
  cursor: pointer;
}

.dui {
  width: 18px;
  height: 18px;
}

.im {
  width: 50px;
  height: 50px;
  margin-left: 3px;
}

.tianadd {
  background: #e0202032;
  width: 70px;
  height: 30px;
  color: #e02020;
  margin: 15px 25px;
  border: none;
  font-weight: 800;
}

.formiteM {
  width: 98%;
  margin-left: 25px;
  border-bottom: 2px solid #ccc;
}

.shanchu {
  color: #e02020;
  font-weight: 600;
  margin-top: 2px;
}

.iconleft {
  font-size: 16px;
  color: #e02020;
}

.aaaaa {
  font-weight: 600;
  font-size: 11px;
  margin-right: 10px;
}

.iconDe {
  display: flex;
  justify-content: space-around;
  margin-left: 15px;
  margin-top: 2px;
}

.huoqu {
  font-size: 14px;
  margin-right: 32px;
}

.zhe {
  width: 100%;
  height: 100%;
  background: #000000a0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;

  .zhao {
    width: 608px;
    background: #fff;
    padding: 15px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -304px;
    margin-top: -250px;
    position: relative;

    .rudang3 {
      display: flex;
      font-family: 30px;
      align-items: center;
      margin-top: 30px;

      .rudang1 {
        width: 100px;
        margin-left: 23px;
        // margin-right: 10px;
      }

      .run2 {
        width: 500px;
      }
    }

    .mybtn {
      margin-top: 50px;
      text-align: right;
    }
  }
}

.left_rght {
  height: 180px;
  overflow: hidden;
  border-bottom: 2px #e5e5e5 solid;
  margin-top: 5px;

  dt {
    width: 20%;
    height: 130px;
    margin: 10px;

    img {
      width: 100%;
      height: 100%;
    }

    float: left;
  }

  dd {
    h3 {
      margin: 10px 0;
    }

    p {
      height: 90px;
      line-height: 25px;
      color: #999999;
      display: -webkit-box;
      /* 将元素视为块级盒子 */
      -webkit-line-clamp: 3;
      /* 控制显示的行数 */
      -webkit-box-orient: vertical;
      /* 设置文本排列方向为垂直 */
      overflow: hidden;
      /* 超出部分隐藏 */
      text-overflow: ellipsis;
      /* 超出部分用省略号表示 */
    }
  }
}

.demo-ruleForm {
  .el-form-item {
    border-bottom: 2px #ccc solid;
    padding-bottom: 30px;
  }

  font-size: 18px;
  font-weight: 800;
  line-height: 70px;
}

.el-input {
  width: 90% !important;
}

.zan {
  margin-top: 40px;
  height: 40px;
  border-bottom: 2px solid #ccc;
  // text-align: center;
  line-height: 40px;
  display: flex;
  justify-content: center;
  font-size: 20px;
}

.szan {
  // margin-top: 40px;
  height: 40px;
  // border-bottom: 2px solid #ccc;
  // text-align: center;
  line-height: 40px;
  display: flex;
  align-items: center;

  img {
    cursor: pointer;
    width: 25px;
    height: 25px;
  }
}

.onebox {
  width: 100%;
  height: 800px;
  // height: 66vh;
  // background: olive;
  // display: flex;
  margin: 10px 10px;
  // position: relative;
  overflow: auto;
}

.image {
  display: flex;

  // flex-wrap: wrap;
  img {
    margin-top: 10px;
    margin-right: 10px;
    border-radius: 10px;
    width: 140px;
    height: 140px;
  }
}

.cen_time {
  width: 10%;
  height: 200px;
}

.cen_text {
  width: 100%;
  height: 140px;
  display: -webkit-box;
  /* 将元素视为块级盒子 */
  -webkit-line-clamp: 3;
  /* 控制显示的行数 */
  -webkit-box-orient: vertical;
  /* 设置文本排列方向为垂直 */
  overflow: hidden;
  /* 超出部分隐藏 */
  text-overflow: ellipsis;
  /* 超出部分用省略号表示 */
  font-size: 18px;
  line-height: 45px;
  word-wrap: break-word;
  word-break: break-all;
}

.cen_texts {
  width: 100%;
  font-size: 18px;
  line-height: 45px;
  word-wrap: break-word;
  word-break: break-all;
}

.centertext {
  width: 85%;
  // background: olive;
}

.demo-tabs>.el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.demo-tabs {
  width: 95%;
  margin-left: 2.5%;
  margin-top: 20px;
  height: 1000px;
  // position: relative;
  // overflow: auto;
}

.cenboxs {
  width: 95%;
  // height: 100vh;
  background: #fff;
  margin-left: 2.5%;
  margin-top: 10px;
  overflow: hidden;
}

.header_cen {
  width: 95%;
  height: 130px;
  display: flex;
  border-bottom: solid 2px #e5e5e5;
  margin-left: 2.5%;
  margin-top: 10px;

  .header_img {
    width: 80px;
    height: 80px;
    margin: 6px;
    cursor: pointer;
  }

  img {
    border-radius: 50%;
    width: 100%;
    height: 100%;
  }

  .card_name {
    margin-left: 1%;
    line-height: 40px;
  }

  .fen {
    background: #ffece8;
    height: 80px;
    margin-top: 10px;
    flex: 1;
    margin-left: 6%;
    display: flex;
    justify-content: space-around;
    font-size: 20px;

    div {
      text-align: center;

      p {
        margin: 5px 0;
        font-weight: 800;
        color: #e02020;
      }
    }

    .fist {
      width: 2px;
      height: 50px;
      background: #e02020;
      margin-top: 12px;
    }
  }
}

.w-50 {
  width: 200px !important;
  height: 32px !important;
}

.age {
  font-size: 14px;
}

.nav {
  height: 54px;
  line-height: 54px;
  background-color: #fff;
  margin-bottom: 16px;

  .nav_box {
    margin-left: 44px;
    font-size: 16px;
    color: #999999;

    .router-link-active {
      font-size: 16px;
      color: #999999 !important;
      text-decoration: none;
    }

    .el-icon {
      margin: 15px 10px 0 10px;
    }
  }
}

.con {
  padding: 0 16px;
  margin-top: 37px;

  .con_item {
    .c_item {
      display: flex;
      padding-top: 37px;
      padding-bottom: 17px;
    }

    .i_lef {
      width: 128px;
      font-size: 16px;
      color: #1a1a1a;
    }

    .i_rig {
      display: flex;
      width: 1040px;
      justify-content: space-between;

      .i_com {
        font-size: 16px;
        font-weight: 600;
        color: #1a1a1a;
      }
    }
  }

  .br {
    border-bottom: 1px solid #e5e5e5;
  }
}

.i_con {
  font-weight: 800;
}

.iconEdit {
  font-size: 16px;
  color: #e02020;
  margin-top: 4px;
  margin-left: 15px;
}

.rudang {
  // font-weight: 600;
  font-size: 16px;
  margin-top: 3px;
  margin-right: 10px;
  margin-left: 7px;
}

.rudangtitle {
  display: flex;
  margin: 10px 15px;
  height: 100px;
}

.quxiao {
  background: #f5f5f5;
  width: 70px;
  height: 30px;
  border: none;
  position: absolute;
  bottom: 15px;
  right: 105px;
  color: #999999;
  cursor: pointer;
}

.guanbi {
  background: #e02020;
  width: 70px;
  height: 30px;
  border: none;
  position: absolute;
  bottom: 15px;
  right: 15px;
  cursor: pointer;
}

.con_bom {
  // position: relative;
  // bottom: 50px;
  // left: 35%;
  display: flex;
  justify-content: center;
  // transform: translateX(-50%);

  .cc {
    width: 100px;
    margin-top: 8px;
    text-align: center;
  }
}

.bbbbb {
  margin-bottom: 40px;
}

.con_bomtab {
  // position: absolute;
  // bottom: 10px;
  // left: 35%;
  display: flex;
  justify-content: center;
  // transform: translateX(-50%);

  .cc {
    width: 100px;
    margin-top: 8px;
    text-align: center;
  }
}

.con_bomly {
  // position: absolute;
  // bottom: 50px;
  // left: 35%;
  display: flex;
  justify-content: center;

  // transform: translateX(-50%);

  .cc {
    width: 100px;
    margin-top: 8px;
    text-align: center;
  }
}

.lyboxla {
  height: 830px;
  overflow: auto;
  position: relative;
}

::v-deep .prickertimes {
  width: 350px !important;
}

// @media (min-width: 2160px) {
//     .cenBox {
//         width: 100%;
//         margin: 0 auto;
//         background-color: #f0f0f0;
//     }
// }

// @media (max-width: 2159px) {
.cenBox {
  width: 1080px;
  margin: 0 auto;
  background-color: #f0f0f0;
}

// }

.rq {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  // margin-top: 100px;
  width: 100%;
  height: 100%;
  // background: olive;

  img {
    width: 228px;
    height: 226px;
    margin-top: 2px;
  }
}

.rqs {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  // margin-top: 100px;
  width: 100%;
  height: 100%;
  // background: olive;

  img {
    width: 228px;
    height: 226px;
    margin-top: 200px;
  }
}

.cccc {
  display: flex;
  font-size: 16px;
  // margin-top: 5px;
  margin-bottom: 5px;

  .c_b {
    flex: 1;
    color: #e02020;
    margin-left: 10px;
  }
}

.xiuga {
  width: 34px;
  // background: olive;
}

.biaoge {
  height: 800px;
  // background: olive;
  position: relative;
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

.avatar {
  width: 100px;
  height: 100px;
}

.tj {
  margin: 30px 20px;
  cursor: pointer;
}

.shan {
  font-size: 18px;
  color: #e02020;
  // margin-top: 3px;
  margin-left: 15px;
}

.XX {
  width: 16px;
  height: 16px;
}

.mage {
  margin: 15px 23px;

  h3 {
    margin-bottom: 10px;
    font-size: 16px;
  }

  p {
    line-height: 25px;
  }
}

.m_le {
  margin-top: 20px;
  margin-left: 200px;
  display: flex;
  margin-bottom: 20px;
  font-size: 20px;

  .le {
    margin-left: 5px;
  }
}

.messig {
  padding: 15px;
  border-bottom: 2px #e5e5e5 solid;
  margin-bottom: 40px;

  .nr {
    width: 70px;
  }

  .hf {
    width: 72px;
  }

  .p2 {
    width: 850px;
    height: 65px;
    // background: olive;
    // background: olive;
    display: -webkit-box;
    /* 将元素视为块级盒子 */
    -webkit-line-clamp: 3;
    /* 控制显示的行数 */
    -webkit-box-orient: vertical;
    /* 设置文本排列方向为垂直 */
    overflow: hidden;
    /* 超出部分隐藏 */
    text-overflow: ellipsis;
    /* 超出部分用省略号表示 */
    font-size: 16px;
    // line-height: 45px
    margin-top: -2px;
  }

  .huifus {
    width: 850px;
    font-size: 16px;
    // line-height: 45px;
  }

  .huifu {
    width: 850px;
    height: 65px;
    // background: olive;
    display: -webkit-box;
    /* 将元素视为块级盒子 */
    -webkit-line-clamp: 3;
    /* 控制显示的行数 */
    -webkit-box-orient: vertical;
    /* 设置文本排列方向为垂直 */
    overflow: hidden;
    /* 超出部分隐藏 */
    text-overflow: ellipsis;
    /* 超出部分用省略号表示 */
    font-size: 16px;
    // line-height: 45px
    margin-top: -2px;
  }

  .q3 {
    display: flex;
    justify-content: end;
    margin: 10px 0;
  }

  .p2s {
    width: 850px;
    // background: palegreen;
    font-size: 16px;
    // line-height: 45px;
  }

  .q1 {
    display: flex;
    justify-content: space-between;
    margin: 10px 0;

    .hhh {
      font-size: 16px;
      font-weight: 800;
    }

    .hhhh {
      font-size: 16px;
      // font-weight: 800;
    }
  }

  .title {
    width: 150px;
    margin-top: 10px;
  }
}

.ylzhe {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background: #0000007a;
  z-index: 99999;

  .ylzhao {
    width: 800px;
    height: 600px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -400px;
    margin-top: -300px;
    // background: #fff;

    img {
      width: 100%;
      height: 100%;
    }

    video {
      width: 100%;
      height: 100%;
    }
  }
}

.kai {

  display: flex;
  justify-content: end;
  cursor: pointer;
  color: red;

  div {
    width: 50px;
    text-align: right;
    // background: olive;
  }
}
</style>
